<template>
  <div class="touzilist">
    <el-card>
      <el-row :gutter="10" class="elrow">
        <el-col :span="2">
          <el-tag>教师姓名</el-tag>
        </el-col>
        <el-col :span="4">
          <el-input placeholder="请输入教师姓名" v-model="formData.tname" maxlength="6"></el-input>
        </el-col>
        <el-col :span="2">
          <el-tag>联系方式</el-tag>
        </el-col>
        <el-col :span="4">
          <el-input placeholder="请输入手机号" v-model="formData.tele" maxlength="11"></el-input>
        </el-col>
        <el-col :span="2">
          <el-tag>审核状态</el-tag>
        </el-col>
        <el-col :span="2">
          <el-select v-model="formData.isverify" clearable>
            <el-option label="未审核":value=0 ></el-option>
            <el-option label="已审核":value=1 ></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" icon="el-icon-search" v-on:click="getTabsList(1,4)">搜索</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" icon="primary" :disabled="disable" v-on:click="multiVerify">批量审核</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="danger" icon="primary" v-on:click="getTabsList">批量删除</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-table
          :data="tableData"
          :key="updateKey"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="50">
          </el-table-column>
          <el-table-column type="index" :index="indexMethod" label="#"></el-table-column>
          <el-table-column label="教师姓名" align="center" width="100">
            <template slot-scope="scope">
              <span>{{scope.row.tname}}</span>
            </template>
          </el-table-column>
          <el-table-column label="资格审核状态" align="center" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.isverify== 1">已审核</span>
              <span v-else style="color: #fc0d6f">
               <el-button  size="mini" type="danger" circle @click="handleVerigy(scope.$index,scope.row)">未审核</el-button>
            </span>
            </template>
          </el-table-column>
          <el-table-column label="性别" align="center" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.sex}}</span>
            </template>
          </el-table-column>
          <el-table-column label="学历" align="center" width="100">
            <template slot-scope="scope">
              <span >{{scope.row.edubgd}}</span>
            </template>
          </el-table-column>
          <el-table-column label="专业" align="center" width="100">
            <template slot-scope="scope">
            <span>
              <el-tag size="medium">{{ scope.row.profession}}</el-tag>
            </span>
            </template>
          </el-table-column>
          <el-table-column label="评级" align="center" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.star === 1">初级教师</span>
              <span v-else-if="scope.row.star === 2">中级教师</span>
              <span v-else-if="scope.row.star === 3">高级教师</span>
              <span v-else>特级教师</span>
            </template>
          </el-table-column>
          <el-table-column label="电话" align="center" width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.tele}}</span>
            </template>
          </el-table-column>
          <el-table-column label="邮箱" align="center" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.email}}</span>
            </template>
          </el-table-column>
          <el-table-column label="身份证号码" align="center" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.sfz}}</span>
            </template>
          </el-table-column>
          <el-table-column label="教师资格证编号" align="center" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.tqc}}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150px">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="handleEdit(scope.$index,scope.row)">修改</el-button>
              <el-button  size="mini" type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.$index,scope.row)"></el-button>   
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-dialog title="教师信息" :visible.sync="dialogFormVisible" width="35%" center>
        <el-form :model="form">
          <el-form-item label="姓名" label-width="150px" >
            <el-col :span="200">
              <el-input v-model="form.tname" autocomplete="off" maxlength="6" clearable></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="学历" label-width="150px" >
            <el-col :span="200">
              <el-select v-model="form.edubgd" placeholder="请选择">
                <el-option label="专科" value="专科"></el-option>
                <el-option label="本科" value="本科"></el-option>
                <el-option label="研究生" value="研究生"></el-option>
                <el-option label="博士" value="博士"></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="专业" label-width="150px" >
            <el-col :span="200">
              <el-input v-model="form.profession" autocomplete="off" maxlength="20" clearable></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="评级" label-width="150px" >
            <el-col :span="200">
              <el-select v-model="form.star" placeholder="请选择">
                <el-option label="初级教师":value=1></el-option>
                <el-option label="中级教师":value=2></el-option>
                <el-option label="高级教师":value=3></el-option>
                <el-option label="特级教师":value=4></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="邮箱" label-width="150px" >
            <el-col :span="200">
              <el-input v-model="form.email" autocomplete="off" maxlength="17" clearable></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="身份证号" label-width="150px" >
            <el-col :span="200">
              <el-input v-model="form.sfz" autocomplete="off" maxlength="18" clearable></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="教师资格证编号" label-width="150px" >
            <el-col :span="200">
              <el-input v-model="form.tqc" autocomplete="off" maxlength="17" clearable></el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" v-on:click="handleSave">确 定</el-button>
        </span>
        </template>
      </el-dialog>
      <div style="text-align: center;margin-top: 30px;">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pagesize"
          :total="total"
          :current-page="currentPage"
          @current-change="current_change">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
  import Vue from 'vue';
  export default {
    data() {
      return {
        // 分页数据
        total: 0,
        pagesize: 4,
        currentPage:1,
        disable: true,
        updateKey: 0,
        rowtemp: [],
        index: -1,
        tableData: [],
        cidlist: [],
        dialogFormVisible: false,
        formData: {
          tname: '',
          tele: '',
          isverify: 0
        },
        form:{
          tid: '',
          tname: '',
          edubgd: '',
          profession: '',
          star: 1,
          tele: '',
          email: '',
          sfz: '',
          tqc: ''
        },
        selectTid:[],
        multipleSelection: [],
      };
    },
    methods: {
      current_change(val){
        this.currentPage = val;
        console.log(val);
        console.log(this.currentPage);
        this.getTabsList(this.currentPage,this.pagesize);
        // console.log(this.tableData);
      },
      indexMethod(index){
        return (this.currentPage-1)*this.pagesize+index+1;
      },
      getTabsList(currentpage,pagesize) {
        this.$axios
          .get("/getlimitteacher", {
            params:{
              tname: this.formData.tname,
              tele: this.formData.tele,
              isverify: this.formData.isverify,
              currentpage: this.currentPage,
              pagesize: this.pagesize
            }
          })
          .then(res => {
            //			console.log(res)
            const data = res.data;
            this.tableData = data.data;
            console.log(res.data);
            this.total = res.data.length;
            console.log(this.total);
            //   console.log(this.tableData)
          })
      },
      handleSelectionChange(val){
        for (let i = 0; i < val.length; i++) {
          //concat方法在数组后追加内容。
          this.cidlist = this.cidlist.concat(val[i].tid)
        }
        this.multipleSelection = val;
        console.log(this.multipleSelection);
        this.disable = false
      },
      handleEdit(index,row){
        this.form.tid = row.tid
        this.form.tname = row.tname;
        this.form.edubgd = row.edubgd;
        this.form.profession = row.profession;
        this.form.star = row.star;
        console.log(this.form.star);
        this.form.tele = row.tele;
        this.form.email = row.email;
        this.form.sfz = row.sfz;
        this.form.tqc = row.tqc;
        this.rowtemp = row;
        this.index = index;
        console.log(row);
        this.dialogFormVisible = true;
      },
      handleSave(){
        this.rowtemp.tid = this.form.tid;
        this.rowtemp.tname = this.form.tname;
        this.rowtemp.xl = this.form.xl;
        this.rowtemp.profession = this.form.profession;
        this.rowtemp.star = this.form.star;
        this.rowtemp.tele = this.form.tele;
        this.rowtemp.email = this.form.email;
        this.rowtemp.sfz = this.form.sfz;
        this.rowtemp.tqc = this.form.tqc;
        Vue.set(this.tableData,this.index,this.rowtemp);
        this.dialogFormVisible = false;
        this.$axios
        .post("/updateteacher",this.form)
        .then(res=>{
          if(res.data.code === 200){
            this.$message({
              type: "success",
              message: "修改成功"
            })
          }else {
            this.$message({
              type: "error",
              message: "您没有该权限"
            })
          }
        })
        this.updateKey = Math.random();
      },
      handleVerigy(index,row){
        this.$confirm("确认信息无误？", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(()=>{
          this.$axios
            .get("/verifysingeteacher",{
              params:{
                tid: row.tid
              }
            })
            .then(res =>{
              if(res.data.code === 200){
                this.$message({
                  type: "success",
                  message: "审核成功"
                });
                row.isverify = 1;
                this.disable = false;
                this.updateKey = Math.random();
              }else {
                this.$message({
                  type: "error",
                  message: "您没有该权限"
                })
              }
            })
          }
        )
      },
      multiVerify(){
        this.$axios
        .post("/verifyteacher",this.cidlist)
        .then(res =>{
          if(res.data.code === 200) {
            this.$message({
              type: "success",
              message: "审核成功"
            });
            this.getTabsList(1,1);
          } else {
            this.$message({
              type: "error",
              message: "您没有该权限"
            })
          }
        })
      },
    },
    mounted() {
      this.getTabsList(1,4);
    },
  }
</script>

<style scoped>
  .touzilist {
    margin: 10px;
  }
  .elrow{
    margin-bottom: 20px;
  }

  .el-input__inner {
    height: 33px;
    font-size: 13px;

  }

  .el-input__inner:hover {
    border-color: #e9e9e9;
  }

  .el-input__inner:focus {
    border-color: #42a5f5;
    box-shadow: none;
    transition-duration: .5s;
  }

  .el-input__inner::-webkit-input-placeholder {
    line-height: 20px;
  }
</style>
